<template>
  <div class="header">
    <h1>柳州市资源共享同步课堂平台</h1>
    <ul>
      <li><nuxt-link :to="{name:'index'}" >首页</nuxt-link></li>
      <li><nuxt-link :to="{name:'resource',query:{newsId:3306}}" :class="{getbg:isShow}">资源中心</nuxt-link></li>
      <li><nuxt-link :to="{name:'activity',params:{id:123}}">活动中心</nuxt-link></li>
      <!-- <li><nuxt-link :to="{name:'news',params:{id:123}}">应用宝</nuxt-link></li> -->
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      isShow:false
    }
  },
  methods:{
    
  }
}
</script>
<style scoped lang="scss">
// a:hover{
//   color: #fff;
//   background: #048efb;
//   padding: 8px 24px;
//   border-radius: 50px;
// }
.getbg{
  color: #fff;
  background: #048efb;
  padding: 6px 22px;
  border-radius: 50px;
}
.nuxt-link-exact-active {
  color: #fff;
  background: #048efb;
  padding: 6px 22px;
  border-radius: 50px;
}
.header{
  @include max-content;
  margin: 30px auto;
  zoom: 1;
  @include float-after;
  h1{
    font-size: 30px;
    line-height: 30px;
    color: $most-color;
    @include float-li;
  }
  ul{
    float: right;
    li{
      @include float-li;
      margin-right: 95px;
      a{
        text-decoration: none;
        font-size: 14px;
      }
    }
  }

}

@media (min-width: 300px)and (max-width: 1199px){
 .header{
   margin: 0 0 30px 10px;
   h1{
     font-size: 24px;
   }
   ul{
     display: none
   }
 } 
}
</style>